<template>
  <div>
    <el-container>
      <el-header>转单管理</el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-switch v-model="showUnHandle" active-text="查看未处理" inactive-text="查看全部" @change="handleChange">
            </el-switch>
            <div v-show="showUnHandle">
              <!-- 入库审核信息表格 -->
              <el-table :data="changes" style="width: 100%">
                <el-table-column prop="orderNum" label="订单号" width="180"></el-table-column>
                <el-table-column prop="staffId" label="送货员工id" width="180"></el-table-column>
                <el-table-column prop="staffName" label="送货员工名字" width="180"></el-table-column>
                <el-table-column prop="state" label="状态" width="180" :formatter="formatState"></el-table-column>
                <el-table-column label="操作" width="350">
                  <template #default="scope">
                    <!-- 更改入库审核状态按钮 -->
                    <el-button v-show="scope.row.state!=1" type="success" size="small" @click="readyChange(scope.row)">分配新员工</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div v-show="!showUnHandle">
              <el-table :data="changes" style="width: 100%">
                <el-table-column prop="orderNum" label="订单号" width="180"></el-table-column>
                <el-table-column prop="employId" label="送货员工id" width="180"></el-table-column>
                <el-table-column prop="confirmTime" label="审查时间" width="180"></el-table-column>
                <el-table-column prop="adminId" label="审查人id" width="180"></el-table-column>
                <el-table-column prop="comment" label="转单备注" width="180"></el-table-column>
                <el-table-column prop="state" label="状态" width="180" :formatter="formatState"></el-table-column>

              </el-table>
            </div>
          </el-col>
        </el-row>
      </el-main>

      <!-- 查看入库审核详情-->
      <el-dialog v-loading="loading" title="入库申请表详情" :visible.sync="showDetailWindow" width="80%">
        <el-table :data="detailList" border>
          <el-table-column property="junkType" label="废品种类" width="100px"></el-table-column>
          <el-table-column property="number" label="数量"></el-table-column>
          <el-table-column property="unit" label="单位"></el-table-column>
          <el-table-column property="totalPrice" label="单类总价"></el-table-column>
        </el-table>
        <!-- 关闭对话框按钮 -->
        <el-button @click="showDetailWindow = false" type="danger" round>关闭</el-button>
      </el-dialog>

      <!-- 分配员工-->
      <el-dialog v-loading="loading" title="分配员工" :visible.sync="showChangeWindow" width="80%">
       <!-- 员工选择下拉框 -->
       <el-select v-model="selectEmployId" placeholder="请选择">
         <el-option v-for="item in usefulEmploy" :key="item.id" :label="item.employeName" :value="item.accountId">
         </el-option>
       </el-select>
       <!-- 立即分配按钮 -->
       <el-button @click="assEmploy" type="success" round>立即分配</el-button>
        <!-- 关闭对话框按钮 -->
        <el-button @click="showChangeWindow = false" type="danger" round>关闭</el-button>
      </el-dialog>
    </el-container>

    <!-- 分页组件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum"
      :page-sizes="[3, 4, 5]" :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "StationBoss",
    data() {
      return {
        selectEmployId:null,
        showUnHandle: true,
        showDetailWindow: false,
        showChangeWindow:false,
        loading: false,
        changes: [],
        detailList: [],
        page: {
          pageNum: 1,
          pageSize: 5,
          total: 0
        },
        stationId: null,
        selectRow:null,
        usefulEmploy: [], // 可用的员工列表
      };
    },
    mounted() {
      this.stationId = localStorage.getItem('stationId');
      this.loadAllChanges(this.page.pageNum, this.page.pageSize);
    },
    methods: {
      assEmploy(){
      this.$http.post("/order/changeDetails/employeePass", {
          id: this.selectRow.id,
          employeeId: this.selectRow.selectEmployId,
          comment: "员工说他"+this.selectRow.reason
      }).then(response => {
        if(response.data.code!=200){
          this.$message.error(response.data.message)
        }
        const result = response.data.data;
        this.page.pageNum = result.current;
        this.page.pageSize = result.size;
        this.page.total = result.total;
        this.changes = result.records;
      });
      },
      // 获取可用的员工列表
      showAllEmploy() {
        this.$http.get("/staff/employee/findUsefulHandlerExcept/"+this.selectRow.employId).then(resp => {
          this.usefulEmploy = resp.data.data
        })
      },
      handleChange() {
        if (this.showUnHandle) {
          this.loadAllUnhandlechanges(this.page.pageNum, this.page.pageSize);
        } else {
          this.loadAllChanges(this.page.pageNum, this.page.pageSize);
        }
      },
      showDetail(row) {
        this.$http.get("/order/orderDetails/selectAllOrderDetailByOrderId/" + row.orderNum).then(resp => {
          if (resp.data.code === 200) {
            this.$message.success(resp.data.message);
            this.detailList = resp.data.data;
          } else {
            this.$message.error(resp.data.message);
          }
        });
        this.showDetailWindow = true;
      },
      readyChange(row) {
        console.log(row)
        this.selectRow = row
        this.showChangeWindow=true
        this.showAllEmploy()
      },
      formatState(row) {
        switch (row.state) {
          case 0:
            return "待审查";
          case 1:
            return "已通过";
          default:
            return "未知";
        }
      },
      handleSizeChange(pageSize) {
        this.page.pageSize = pageSize;
        this.loadAllChanges(this.page.pageNum, this.page.pageSize);
      },
      handleCurrentChange(pageNum) {
        this.page.pageNum = pageNum;
        this.loadAllChanges(this.page.pageNum, this.page.pageSize);
      },
      loadAllChanges(pageNum, pageSize) {
        this.changes =null
        this.$http.post("/order/changeDetails/checkChangeByStationId", {
            stationId: this.stationId,
            pageNum: pageNum,
            pageSize: pageSize
        }).then(response => {
          if(response.data.code!=200){
            this.$message.error(response.data.message)
          }
          const result = response.data.data;
          this.page.pageNum = result.current;
          this.page.pageSize = result.size;
          this.page.total = result.total;
          this.changes = result.records;
        });
      },
      loadAllUnhandlechanges(pageNum, pageSize) {
        this.changes =null
        this.$http.post("/order/changeDetails/checkUnHandelChangeByStationId", {
            stationId: this.stationId,
            pageNum: pageNum,
            pageSize: pageSize
        }).then(response => {
          if(response.data.code!=200){
            this.$message.error(response.data.message)
          }
          const result = response.data.data;
          this.page.pageNum = result.current;
          this.page.pageSize = result.size;
          this.page.total = result.total;
          this.changes = result.records;
        });
      }
    }
  };
</script>

<style scoped>

</style>
